Before proceeding the main topic, at first I want to describe how to develop IFrame based facebook application. I assume that, the reader have minimum knowledge of how to develop Canvas based facebook application. If you never develop any facebook application please visit: http://wiki.developers.facebook.com/index.php/Creating_your_first_application
Steps of Developing IFrame based facebook application:
- When you setup a new application in facebook, choose “Use iframe” for Canvas Page URL.
- Now set the authentication code, at your bootstrap file:
<?php$facebook = new Facebook(‘api_key’, ‘secret_key’);
include "facebook.php";
$user = $facebook->require_login();
//catch the exception that gets thrown if the cookie has an invalid session_key in it
try {
if (!$facebook->api_client->users_isAppAdded()) {
$facebook->redirect($facebook->get_add_url());
}
}
catch (Exception $ex) { //this will clear cookies for your application and redirect them to a login prompt
$facebook->set_user(null, null);
$facebook->redirect(callback_url);
}
?>
3. And don’t forget to place the necessary facebook PHP library. http://wiki.developers.facebook.com/index.php/PHP
Now I’m describing the main topic, that is how to render XFBML or FBML in your IFrame based application.
1. First Create a file called xd_receiver.htm
2. Place xd_receiver.htm in the root directory. Suppose your application base directory is: http://myapp.com/iframeapp . Then place xd_receiver.htm in iframeapp folder. Now add the following html code to xd_receiver.htm .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Cross-Domain Receiver Page</title>
</head>
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.debug.js" type="text/javascript"></script>
</body>
</html>
Now in your view file, or may be layout file, place this code. Here I’m showing the layout files format for IFrame application.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<script src=”http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php” type=”text/javascript”></script>
</head>
<body>
<!– Here is the FBML code in IFrame application –>
<fb:serverfbml>
<script type=”text/fbml”>
<fb:fbml>
<fb:request-form action=”<url for post invite action, see wiki page for fb:request-form for details>” method=”POST” invite=”true” type=”XFBML” content=”This is a test invitation from XFBML test app <fb:req-choice url=’see wiki page for fb:req-choice for details’ label=’Ignore the Connect test app!’ /> ” > <fb:multi-friend-selector showborder=”false” actiontext=”Invite your friends to use Connect.”> </fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
<!– Here is the XFBML code –>
This is <fb:name uid=”<?=$this->userId?>” useyou=’false’> </fb:name>
My photo <fb:profile-pic uid=”<?=$this->userId?>” > </fb:profice-pic>
<!– Remember all XFBML tags should be placed before below javascript code –>
<script type=”text/javascript”>
FB_RequireFeatures([“XFBML”], function(){
FB.Facebook.init(“Place here the API Key of your application“, “xd_receiver.htm”);
});
</script>
</body>
</html>
** Remember XFBML is nothing but a subset of FBML that are supported for IFrame application.
** And look the green + bold color code in the above file. This is how we could render FBML code in IFrame application.
<fb:serverfbml> : This tag is used to renders the FBML on a Facebook server inside an iframe. Details of this tag is here: http://wiki.developers.facebook.com/index.php/Fb:serverfbml
References:
Think Different 
November 26, 2008 at 1:50 pm
tried the same but never worked dude..
November 26, 2008 at 2:30 pm
@Vijay, you could send me your code. email me: mahmudahsan@yahoo.com
December 2, 2008 at 3:34 pm
For some reason, my app doesn’t like the userId?>.
It just displays the following in the browser:
This is userId ?>” useyou=’false’> My photo userId
Is there any way in XFBML to obtain the userid of the person that is logged in so that I can use it here:
All the examples I’ve seen have the uid hardcoded….
March 13, 2009 at 3:35 pm
hey brother, replace that variable of userid as your wish. no problem. and the example here i provided is tested. so i think there are something wrong in your process. try again.
January 15, 2009 at 12:26 pm
mahmudahsan do you have any experiencie with fb:tabs using ? Because they are rendering well in my app but i cant make the link sworks fine. For example if i use the apps.facebook/myappname/whatever.php it just render a new facebook page inside iframe. And if i use mydomain/appname/whatever.php it justs open my page instead of doing it inside the iframe. Thanks and great blog
December 1, 2011 at 4:58 am
there are still some limitations in XFBML and IFrame based application development.
January 15, 2009 at 2:42 pm
@damian, not all the fbml tags you could successfully render in your iframe application. fb:tabs is one of them.
January 15, 2009 at 3:00 pm
It render fine. The problem is that attribute target=”_top” dont seems to work with it . Thanks anyway
August 24, 2009 at 8:22 pm
could you fix, your problem with fb:tabs using XFBML?
August 25, 2010 at 5:49 pm
I have the same problem \: is there any solution? I render tabs inside iframe
January 28, 2009 at 5:57 am
hi
i have follow the all the steps to render the xfbml for my iframe based application.
but it seems like not rendring.
For example :
i m adding this tag on my aspx page:
Grant permission for email
tag for prompting email popup.but it is just showing simple text “Grant permission for email ” and not prompting any popup.
its not becoming hyperlink.
—when i chk the session using Fb.apiclient.get_seesion.it is coming null..but the user is login .
any suggestion?
thanks
January 28, 2009 at 2:29 pm
@shikha, I’ve no idea on aspx. And there are still some limitations in XFBML and IFrame based application development.
January 29, 2009 at 4:52 am
ok
i got the solution…now i can get the session for javascript api
thanks for reply…
February 2, 2009 at 9:43 am
Hi
i m using xfbml tags …but they are not rendring on my page,
like i m using multifriend selector etc.
i m checking on localhost..i come to know that xfbml tags can not be render on localhost?
any suggestions?
thanks
March 4, 2009 at 7:06 pm
Thanks , its so nice and helpful .
March 4, 2009 at 7:46 pm
Hi…
I create one application that conteins this
A nav bar in FBML (<fb:tab-item)
A flash graphic (swf)
The problem is that if I click on any option inside the nav bar it doesn’t work properly it reloads all the page in the iFrame.
How can I fix this problem?
March 4, 2009 at 7:56 pm
@faiverson, this is not possible to work perfectly in iframe. try your own menu system.
March 13, 2009 at 7:48 am
Hello,
I have followed your tips but i was not be able to render even a simple tag in my iFrame app..my code looks like this:
…
….
This is
My photo
FB_RequireFeatures([“XFBML”], function(){
FB.Facebook.init(“xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx”, “xd_receiver.htm”);
});
i have also created ‘xd_receiver.htm’ and placed it in root as well as in the folder where my iFrame_FBML page resides..but no success..it only displays:
This is
My Photo
and the rest is blank..
please help me in this regard..
thanks,
Shayan.
March 13, 2009 at 7:54 am
i have placed my code after fb:serverfbml closing tab..(i hav an empty fb:serverfbml block)
and after that, i have places your javascript script as u described (before body ends.)..
…
….
FB_RequireFeatures([“XFBML”], function(){
FB.Facebook.init(“xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx”, “xd_receiver.htm”);
…
May 7, 2009 at 12:25 am
I have tried the code above without success, too….
I get a blank page that only displays :
This is
My Photo
Here my code:
require_login();
?>
<fb:request-form action=”” method=”POST” invite=”true” type=”XFBML” content=”This is a test invitation from XFBML test app ” >
Hello is
my photo
fb_requirefeatures([“XFBML”], function(){
fb.facebook.init(“my_app_key”, “xd_receiver.htm”);
});
My xd_receiver.htm is in under my application directory where index.php is.
I would appreciate any kind of help, Thanks in advance.
May 10, 2009 at 4:09 am
Its not working for me either.
Please help!!!
May 16, 2009 at 7:14 am
I read somewhere else, its FB.init and not FB.facebook.init
July 7, 2009 at 11:40 am
Hi,
Nice article..
I am new to facebook apps. I have created one application which will ask the user to take the pledge. And on form submission, I need to set some message on that user’s wall (Message like, user_name has completed the pledge etc etc). By going trough the docs I understood that, if I use stream.publish method, I can do my functionality. Since it requires some permission, I need to show one prompt asking for permission. But I want to show the prompt as soon as th user submit the form instead of clicking on the link and showing. How can I do it ?
October 16, 2009 at 9:55 am
I have a problem with Facebook Fan Widget on site interni-esterni.com it not pass the W3C validation… anyone can resolve?
i’m not a programmer 😦
October 19, 2009 at 8:15 pm
Unfortunately I am able to put all kinds of stuff on the page, including a share button but when I click it, it just loads an empty box. Other xFBML commands aren’t working even with the closing tag. I’m in need of a form on the page and using FBML is totally giving me trouble with the action, so I would like to use the iframe. Anyone else having problems actually connecting to the facebook. With these issues I also wont be able to publish on the wall, etc, etc…
November 4, 2009 at 12:12 pm
Thanks, this Example works fine
nevertheless i decided to stick to FBML app because of the additional scrollbar and other issues showing up when using iframe mode
January 16, 2010 at 11:29 pm
could you send me the code please?
rlwebs@gmail.com
January 20, 2010 at 2:54 pm
could you send me the code please?
to: anak@hasian.org
Thanks
January 21, 2010 at 3:57 pm
brilliant! worked for me first time…I’m actually working on integrating streamPublish into my iframe application…I’ve not managed it yet but your code seems like a good start…thanks! 🙂
January 23, 2010 at 1:23 pm
Hi
Can anybody help me??
I am developing facebook application, in which i want the username of user who has added the application to his page.
for example: if A has added the application to his page/profile, and i am viewing A’s page/profile, i must get A’s name in the application.
Is it possible, Please help.
Thanks
March 7, 2010 at 7:48 pm
I’m trying to use xFBML in an iframe as well but having no luck with it. I’m currently trying to get the test app, Footprints, to work. Here’s a look at my code. Let me know what I’m missing.
require_frame();
$user = $facebook->require_login();
// phpinfo();
if (isset($_POST[‘to’])) {
$prints_id = (int)$_POST[‘to’];
$prints = do_step($user, $prints_id);
} else {
if (isset($_GET[‘to’])) {
$prints_id = (int)$_GET[‘to’];
} else {
$prints_id = $user;
}
$prints = get_prints($prints_id);
}
echo “\n”;
?>
FB.init(“API key here – and yes, it really is there”, “stickershock/xd_receiver.htm”);
Hi <fb:name firstnameonly="true" uid="” useyou=”false”>!
<a href="get_add_url() ?>”>Put Footprints in your profile, if you haven’t already!
<?php
if ($prints_id != $user) {
echo 'Do you want to step on ?’;
echo ”;
} else {
echo ‘Step on a friend:’;
echo ”;
}
?>
These are <fb:name uid="” possessive=”true”> Footprints:
FB_RequireFeatures([‘XFBML’], function(){
FB.Facebook.init(‘API Key here’, ‘xd_receiver.htm’);
});
March 23, 2010 at 11:03 am
Hello,
i got a web project developed with Visual Studio 2010. I included all tags u told to, but the FBML-Tags won’t be displayed. Any solutions?
March 23, 2010 at 1:26 pm
The mistake that was preventing my xFBML from rendering was that I didn’t add a Connect URL on the application admin page. Check that.
April 4, 2010 at 7:48 pm
hey all any one have an idea how to pass the user id to my flash game i musing the iframe tag of facebook ..plz i need it as soon as possible
April 9, 2010 at 1:47 pm
thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much thank you we much
May 7, 2010 at 6:55 pm
after 10 hours of searching and trying every tutorial and code example, finally it woks thanks to your detailed example… thank you very much!
ofir
August 27, 2010 at 10:33 am
Dear Mahmud Vai, I need your help to create a fb application. It’s my first fb app. I’m facing problem creating a fb dialog window inside a iframe. Here is my code
FB_RequireFeatures([“XFBML”], function(){
FB.Facebook.init(“a1************************e”, “xd_receiver.htm”);
});
new Dialog().showMessage(‘Hi There’, ‘ Hi, i\’m a default pop-up, but shh you can play with me!’ );
The above code doesn’t work. It should open a pop-up dialog. It is not doing so. Please help.
August 27, 2010 at 11:26 am
Forget this article and try this
http://thinkdiff.net/facebook/graph-api-iframe-base-facebook-application-development/
January 28, 2011 at 2:05 pm
dear i want to use i frame code in facebook , i have only url of site i want to use the data of tha site on my page ….
February 26, 2011 at 1:11 pm
I am working on an iframe application. Also, I am trying to put the generate the facebook INVITE page inside a Jquery layer. But, when loading it, it is now showing up. Please help me in this issue.
My code is given below:
<fb:request-form method="POST" type="Game" invite="true" action="xxxxxxx" content="
February 27, 2011 at 1:48 pm
With thanks for this excellent content material, I will probably connect this site in order to my own really simply syndication feeds, somebody essentially informed me personally relating to this two to three weeks ago. this is actually the greatest.
February 28, 2011 at 3:11 pm
I found a solution to create an iframe application without being a facebook developer . It’s very powerful:
http://www.facebook.com/iframe.apps
March 9, 2011 at 2:13 am
Really cool software to harness the power of your facebook fan page that addresses the change coming on March 11th http://www.fbmaxed.net for more info.
March 14, 2011 at 9:51 am
Hi,
I found a solution very usefull.
Just add the application to the fan page: http://www.facebook.com/iframe.apps
Feel free to tell it to your readers,
Bruno Bros
March 14, 2011 at 9:53 am
Hi,
I found a very useful approach.
Just add the application to the fan page:
http://www.facebook.com/iframe.apps
Feel free to tell your readers
Bruno Bros.
April 7, 2011 at 6:01 am
Hello all
How can I add Like and Frends dialog box to my webpage.
April 7, 2011 at 8:19 am
Hello Seo,
its easy loin to face book and get into the face book pages where you can add as a pages.You will get a buttons like ‘Like’,”show faces’ etc…There is a button in the last for getting the code.Click on that you will be prompted with a dialog box and copy the source code form that and paste into your website.It will work
April 8, 2011 at 1:33 pm
wGLULb http://dhY3n0fjvTtj48mG9sFnCv.com
May 7, 2011 at 10:12 pm
KERcBl http://gdjI3b7VaWpU1m0dGpvjRrcu9Fk.com
May 12, 2011 at 3:52 am
my codes are working, cool 🙂
June 19, 2011 at 11:05 am
Is this data still accurate because the post is 3 years old and I need to know is this still works?
June 23, 2011 at 10:43 am
Hey Guys….
Please anyone help me on FB like button issue…..I am trying to use XFBML in my application but some reason I am not able to use and also I am not sure where I need to keep..this code exactly…(
FB.init(“123456789000000000″,”/xd_receiver.html”);
<fb:like href="” send=”false” width=”250″ show_faces=”false” font=”” layout=button_count>
) and I would like to know whether this is correct way of coding I am not able to call xd_receiver.html.I was so confused about api key of app…
Please guys any one help me on this …since it is very urgent to add FB like button on my application…….
Thanks In Advance……………………………..
June 23, 2011 at 11:00 am
Hi…
Please …can any one send working Face book like button code (related to XFBML code) to my mail ID….sureshkolipakula@gmail.com
Please it is some what urgent……..
July 4, 2011 at 6:10 pm
inner foot tattoo,
July 24, 2011 at 10:16 pm
Hi everyone,
I have setup my fanpage made ez plugin in wordpress and also have the Iframe app setup on my facebook fan page. I have put a page before someone likes my page. now I have this problem that I don’t know how to set my destination page to my wall, right after someone clicks the “like button”. I don’t want to create another page in wordpress after: efpd-liked.
Is there a code for fanpage wall to put after “efpd-liked”? Or I’m lost somehwere?
Thanks
July 31, 2011 at 2:57 am
I also it has more protential.
September 3, 2011 at 5:29 am
Sorry, I ran out of credit latvian nymphet 552
September 3, 2011 at 5:30 am
Do you need a work permit? ukrainian nymphets nn %-[[[
September 3, 2011 at 2:48 pm
How do I get an outside line? young bikini babes 56697
September 4, 2011 at 12:07 am
How many days will it take for the cheque to clear? pinup bikini 232166
September 4, 2011 at 12:07 am
Best Site good looking freedom bbs ntmphet 207758
September 7, 2011 at 8:10 pm
A Second Class stamp combat bbs
18311
September 8, 2011 at 8:29 pm
Good crew it’s cool 🙂 nn pre teen
leqztk
September 21, 2011 at 9:51 am
In a meeting Black Nymphets
uczwo
September 23, 2011 at 6:22 pm
I’m on holiday Hussyfan Defined %-DD
September 26, 2011 at 4:24 am
A staff restaurant Preteen Lolita 0157
May 7, 2012 at 8:19 am
I truly love this particular template you have got taking with your web site. What’s the name of the template incidentally? I was looking at making use of this style for that site Let me create for my class project.
January 18, 2013 at 4:01 pm
Your entire article, “Facebook – FBML rendering in IFrame application Think Different” ended up being well worth writing a comment on!
Simply just desired to say you actually did a great work.
Thank you ,Claude
January 24, 2013 at 5:00 am
I really want to book mark this particular article, “Facebook – FBML rendering
in IFrame application Think Different” on
my personal blog. Do you care if I reallydo it? Thanks a lot -Joseph
April 12, 2013 at 7:30 am
I am sure this paragraph has touched all the internet users, its really really nice article on building up new webpage.
May 7, 2013 at 3:04 am
Ahaa, its nice dialogue about this piece of writing here at this web site, I have read all that, so
at this time me also commenting here.
May 23, 2013 at 10:59 pm
The more hours of training you have, the better your chances of
landing a desired job. The only problem why we lack in
communication skills as far as English language is concerned is
that the pupils starting with kindergarten are not trained well by
their teachers as regards the macro-skills in teaching a particular
language. Finally, parents teaching the language at home should take advantage of the easy access to English materials available around the world.
June 12, 2013 at 10:10 am
June 6, 2013: Toronto — Air Canada Centre concerts 4/20 2010One of the largest open air festivals that is held in Punchestown.
Brewer, who worked on the Games as a close aide to Romney.
During the winter months, snow machines provide a fresh blanket of snow throughout the late afternoon.
Summer is officially here and that means it’s time for some fun in the sun or use Porta-Potties.
June 28, 2013 at 2:13 pm
For the reason that the admin of this site is working, no uncertainty very soon it will
be famous, due to its feature contents.
July 23, 2013 at 8:24 am
Aloe vera is quite considerably a secure organic herb devoid of any acknowledged toxicity that we
could in fact uncover in any study or treatise.
The majority of dieters want to see weight loss instantly and will use every resource
initially to lose this weight. Probiotic supplements
will give you the same benefits as food sources.
July 27, 2013 at 8:32 pm
Good day! I just want to give an enormous thumbs up for the great
info youve right here on this post. I will likely be coming back to your blog for extra soon.
July 27, 2013 at 11:13 pm
Hey just wanted to give you a quick heads up. The text
in your content seem to be running off the screen in Internet
explorer. I’m not sure if this is a formatting issue or something to do with web browser compatibility but I thought I’d post to let you know.
The design look great though! Hope you get the issue resolved soon.
Many thanks
August 6, 2013 at 2:22 am
Way cool! Some extremely valid points! I appreciate you writing this post plus
the rest of the site is also really good.
August 6, 2013 at 2:27 am
Following I noticed the motion picture, I had to look at
the dish and above the decades I have hopefully enhanced on the unique recipe I identified.
As soon as the fried chicken is already cooked, remove them from the skillet and arrange them in a pan, then cover with paper towels to keep
them warm. This is certainly cheaper than taking them out for fast food and fried chicken is very simple to make.
August 6, 2013 at 12:26 pm
Hand held vaporizer models are small sufficient to fit inside
the palm of one’s hand; fantastic to just through in you pocket or purse anytime you travel. The technology is in process of being picked up by Genesis Technology Systems. If any liquid pools at the top just dab it off with a tissue, and replace the silicone cap.
August 6, 2013 at 6:13 pm
Are there any pills that do not cause any side effects that can be used by hypothyroid people
for weight loss? Can anyone suggest name of pills and
source of purchase???.
August 8, 2013 at 5:28 am
I savor, lead to I found just what I was having a look
for. You’ve ended my four day long hunt! God Bless you man. Have a nice day. Bye
August 10, 2013 at 10:14 pm
I really like it when individuals come together and share opinions.
Great website, stick with it!
August 26, 2013 at 3:27 am
My favorite fictional spy is Zeke Kelso from the 1965
movie, That Darn Cat! Really like, Enjoy, Adore, that
movie!!! Book is great, too!!!
August 30, 2013 at 10:19 pm
People often say my i – Phone Bluetooth won’t work; it’s
not showing anything in the device’s list. The Sansa View plays well with others and does a great job in the compatibility department for a nice and versatile Video MP3 Player. Please leave a comment below, letting us know what you think.
February 8, 2014 at 1:41 pm
Just wish to say your article is as astonishing. The clearness to your post is just excellent and that i can
assume you are knowledgeable on this subject. Fine with your permission
allow me to snatch your RSS feed to stay updated with forthcoming post.
Thank you 1,000,000 and please keep up the rewarding work.
May 21, 2014 at 2:46 pm
Ahaa, its nice discussion about this article here at this blog,
I have read all that, so at this time me also commenting at this place.
June 18, 2014 at 8:38 am
Howdy! I’m at work browsing your blog from my new iphone 3gs!
Just wanted to say I love reading your blog and look forward to all your posts!
Carry on the excellent work!
June 18, 2014 at 10:12 pm
magnificent issues altogether, you just won a
new reader. What could you recommend about your submit that you simply made
a few days in the past? Any certain?
June 20, 2014 at 5:15 pm
why you make your application sun mobile dictionnaire in french?
July 16, 2014 at 10:42 am
Greetings from Colorado! I’m bored at work so I decided to check out your blog
on my iphone during lunch break. I really like the information you provide here
and can’t wait to take a look when I get home. I’m shocked at how
quick your blog loaded on my phone .. I’m not even using WIFI, just
3G .. Anyways, amazing site!
August 21, 2014 at 12:31 pm
Right here is the right web site for anyone who would like to find
out about this topic. You know a whole lot its almost hard to argue with you (not that I personally would want to…HaHa).
You certainly put a fresh spin on a subject that’s been discussed for ages.
Wonderful stuff, just excellent!
October 2, 2014 at 5:13 am
Howdy would you mind letting me know which hosting company you’re using?
I’ve loaded your blog in 3 completely different browsers
and I must say this blog loads a lot faster then most. Can you suggest a good web hosting provider at a honest price?
Thanks a lot, I appreciate it!
October 2, 2014 at 6:17 am
This site certainly has all the information I needed about this subject and didn’t know
who to ask.
October 7, 2014 at 10:24 pm
What’s up Dear, are you in fact visiting this web
site regularly, if so after that you will without doubt get fastidious know-how.
October 29, 2014 at 2:29 pm
If you are going for best contents like me, just visit this website everyday since it provides quality contents,
thanks
March 20, 2015 at 2:02 am
You may see guarana, yerba mate, and green tea as ingredients in supplements.
Low estrogen levels may lead to other imbalances in the delicate chemistry of the body as hormones interact and depend upon one another in the normal processes that occur within the
body. However, let us admit that not everyone succeed in this.
October 29, 2021 at 1:14 am
https://takipcisepette.com/blog/begeni-yaparak-para-kazanma/